<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
    size: { type: String, default: "32rpx" },
    space: { type: String, default: "30rpx" },
    icon: { type: String, required: true },
    activeIcon: { type: String, required: true },
  },
  emits: {
    "update:modelValue": (value: number) => typeof value === "number",
  },
  setup(props, ctx) {
    const starClick = (value: number) => {
      // ctx.emit("update:modelValue", props.modelValue === value ? 0 : value);
      ctx.emit("update:modelValue", value);
    };
    return { starClick };
  },
});
</script>

<template>
  <view class="rate">
    <view
      class="rate-item"
      v-for="i of 5"
      :key="i"
      :style="{ marginRight: space }"
    >
      <image
        class="rate-star"
        :style="{ width: size, height: size }"
        :src="modelValue >= i ? activeIcon : icon"
      />
      <view class="rate-btn" @click="starClick(i)"></view>
    </view>
  </view>
</template>

<style lang="scss">
.rate {
  display: flex;
  align-items: center;

  .rate-item {
    position: relative;
  }

  .rate-star {
    display: block;
  }

  .rate-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    padding: 10rpx;
    transform: translate(-50%, -50%);
  }
}
</style>